<template>
  <div class="survey container-content">
    <div class="app-view-box">
      <el-row>
        <el-col :span="24">
          <h1 class="panel-title">组装拆卸</h1>
        </el-col>
      </el-row>
      <el-divider class="divider"></el-divider>
      <el-row class="export-container">
        <!-- <el-form ref="form" :model="form">
          <el-form-item>
            <el-select v-model="form.region" placeholder="物料编码">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select v-model="form.region" placeholder="包含">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form> -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addNewData"
          >新增</el-button
        >
      </el-row>
      <el-table
        ref="customerTable"
        :data="tableData"
        stripe
        style="width: 100%"
      >
      
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="docNo" label="单据编号"></el-table-column>
        <el-table-column label="事务类型">
            <template slot-scope="scope">
                                <p v-if="scope.row.transactionType=='Assembly'">组装</p>
                                <p v-if="scope.row.transactionType=='Dassembly'">拆卸</p>
                            </template>
        </el-table-column>
        <el-table-column prop="bizTime" label="日期"> </el-table-column>

        <!-- <el-table-column prop="isUsed" label="单据状态">
        </el-table-column> -->
        <el-table-column prop="materialCode" label="物料编码"> </el-table-column>
        <el-table-column prop="materialName" label="物料名称"> </el-table-column>
        <el-table-column prop="model" label="规格型号">
        </el-table-column>
        <el-table-column prop="meteringUnitName" label="单位">
        </el-table-column>
        <el-table-column prop="num" label="数量">
        </el-table-column>
        <el-table-column prop="wareName" label="仓库">
        </el-table-column>
        <el-table-column prop="regionName" label="仓位">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                size="small"
                                icon="el-icon-more"
                                @click="handleDetail(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                size="small"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-button
                type="danger"
                plain
                size="small"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="table-pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
    >
    </el-pagination>
    <!-- 弹出框 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      size="100%"
      destroy-on-close
    >
      <div class="drawer-content">
        <FormCom ref="formRef" v-if="title=='新增装配拆卸'"/>
        <Formedit ref="formRef" v-if="title=='编辑装配拆卸'" :listid='listid'/>
        <Formdetail ref="formRef" v-if="title=='查看装配拆卸'" :listid='listid'/>
      </div>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getAssembleList,
  deleteAssembleList,
} from "@/api/bim/bim";
import FormCom from "./add/index";
import Formedit from "./edit/index";
import Formdetail from "./detail/index";
export default {
  components: {
    FormCom,
    Formedit,
    Formdetail
  },
  data() {
    return {
      listid:'',
      title:'新增装配拆卸',
      searchValue: "",
      total: 0,
       currentPage:1,
      pageSize:10,
      tableData: [],
      drawer: false, //弹窗显示
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
   watch: {
        "$store.state.workflow.businessDrawer": {
            handler(val) {
                if (!val) {
                    this.getData();
                }
            },
        },
    },
  methods: {
    exporting() {},
    // 获取列表请求
    getData() {
      getAssembleList({
         limit: this.pageSize,
        page: this.currentPage,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 删除事件
    handleDelete(index, row) {
      this.$confirm("请确定要删除所选的记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          deleteAssembleList(row.id).then((res) => {
            // console.log(res);
            if (res.code === 200) {
              this.tableData.splice(index, 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 搜索事件
    searchData() {
      // let searchValue = this.searchValue;
      // searchSurvey({ searchValue }).then((res) => {
      //   this.tableData = res.rows;
      //   console.log("请求成功", res);
      // });
    },
    //新增按钮
    addNewData(index) {
     this.$store.dispatch("workflow/getModel", {
                menuId: this.$route.meta.menuId,
                type: "launch",
                businessType:'30'
            });
    },
    //编辑按钮
    handleEdit(index, row) {
       this.drawer = true;
      this.title='编辑装配拆卸'
      this.listid=row.id
    },
    // 详情按钮
    handleDetail(index, row) {
       this.drawer = true;
      this.title='查看装配拆卸'
      this.listid=row.id
    },
    submit() {
      this.$refs.formRef.onSubmit();
      this.drawer = false;
      this.getData();
    },
    // 取消
    cancelForm() {
      this.drawer = false;
      this.getData();
    },
    // 关闭 drawer
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.rowId = "";
          this.getData();
        })
        .catch((_) => {});
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}

.export-container {
  margin: 15px 0;
}

.pagination {
  margin-top: 10px;
}
</style>
